<template>
    <div class="layerRtbContain cover">
        <!-- 切换标题 (定位) -->
        <div class="clearfix list-title" style="position: absolute;top: 0px;left: 0px;">
            <ul class="uiTab3 fl">
                <li class="uiTab3-active"><a href="javascript:">司管理</a></li>
                <!-- <li><a href="javascript:">选中项二</a></li>
                <li><a href="javascript:">选中项三</a></li> -->
            </ul>
        </div>
        <!-- 选中项 111 -->
        <div class="list-content">
            <div class="clearfix mb10">
                <div class="fr">
                    <router-link :to="this.$route.matched[1].path">
                        <input type="button" class="uiBtn-normal uiBtn-orange fl" value="返回">
                    </router-link>
                </div>
                <div class="fr mr5" v-show="timeType == 1">
                    <input @click="timeType = 2" type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="周期">
                    <input type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="今日">
                    <input type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="本周">
                    <el-date-picker value-format="yyyy-MM" v-model="startEndTime" type="month" placeholder="选择月"></el-date-picker>
                </div>
                <div class="fr mr5" v-show="timeType == 2">
                    <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="startTime" type="date" placeholder="开始日期"></el-date-picker>
                    <el-date-picker class="fl mr5" value-format="yyyy-MM-dd" v-model="endTime" type="date" placeholder="结束日期"></el-date-picker>
                    <input @click="timeType = 1" type="button" class="uiBtn-normal uiBtn-blue fl mr5" value="查询">
                </div>
            </div>
            <table class="uiTable">
                <thead>
                    <tr>
                        <th width="4%" colspan="5">隶属</th>
                        <th width="4%" colspan="6">项目</th>
                        <th width="4%" colspan="3">款项</th>
                        <th width="4%" colspan="7">项目经理</th>
                        <th width="4%" colspan="3">监理</th>

                    </tr>
                    <tr>
                        <th width="4%">序</th>
                        <th width="4%">地区</th>
                        <th width="4%">城</th>
                        <th width="4%">工程经理</th>
                        <th width="4%">经理评价</th>

                        <th data-title="项目数量(审计、准备、在施)" width="4%">数量</th>
                        <th data-title="待完工的项目数量" width="4%">竣工</th>
                        <th data-title="延期无延期单的工地数量" width="4%">延期</th>
                        <th data-title="根据订单标注状态" width="4%">搁置</th>
                        <th width="4%">投诉</th>
                        <th data-title="本月已完工/本月应完工" width="4%">完工率</th>

                        <th data-title="不含已回项目" width="4%">应回款</th>
                        <th data-title="不含已回项目" width="4%">金额</th>
                        <th data-title="本月已回款/本月应回款" width="4%">回款率</th>

                        <th data-title="项目经理正常数量(4级以上)" width="4%">人数</th>
                        <th data-title="在施/人数，看均值" width="4%">均在施</th>
                        <th width="4%">材配比</th>
                        <th width="4%">人订比</th>
                        <th width="4%">质订比</th>
                        <th width="4%">现订比</th>
                        <th data-title="摄像头使用率(订单完成率)" width="4%">摄用率</th>

                        <th width="4%">人数</th>
                        <th data-title="在施/人数，看均值" width="4%">均在施</th>
                        <th width="4%">完成比</th>
                    </tr>

                </thead>
                <tbody>
                    <!-- <tr>
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>6500</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr> -->
                </tbody>
            </table>
            <div class="thinScroll thinScroll-table" v-scrollHeight="10">
                <table class="uiTable uiTable-striped-odd uiTable-hover">
                    <tbody>
                        <tr v-for="(item,index) in divisionList" :key="index">
                            <td width="4%">{{index+1}}</td>
                            <td width="4%">{{item.diquName}}</td>
                            <td width="4%">{{item.cityName}}</td>
                            <td :class="{'cYellow':subIndex == index}" width="4%" class="">{{item.userName}}</td>

                            <!-- <td width="4%" :class="{'cBRed':index == 4}">{{index | stage}}</td> -->
                            <td width="4%" class="cBGreen">{{item.evaluation}}</td>
                            <!-- <td width="4%" v-else-if="index==1" class="cBGreen">优</td>
                            <td width="4%" v-else-if="index==2" class="cBGreen">良</td>
                            <td width="4%" v-else-if="index==3" class="cBGreen">中</td>
                            <td width="4%" v-else class="cBRed">差</td> -->

                            <td width="4%">{{item.ptSum}}</td>
                            <td width="4%">{{item.ptCompleted}}</td>
                            <td width="4%">{{item.ptExtersion}}</td>
                            <td width="4%">{{item.ptPutonHold}}</td>
                            <td width="4%">{{item.ptComplaint}}</td>
                            <td width="4%">{{item.ptCompletionRate}}%</td>

                            <td width="4%">{{item.patReceivable}}</td>
                            <td width="4%">{{item.patMoney}}</td>
                            <td width="4%">{{item.payChargebackRate}}%</td>

                            <td width="4%">{{item.pmPeopleSum}}</td>
                            <td width="4%">{{item.pmAreApplying}}</td>
                            <td width="4%">{{item.pmMaterialPatio}}%</td>
                            <td width="4%">{{item.pmPersonRatio}}%</td>
                            <td width="4%">{{item.pmQualityRatio}}%</td>
                            <td width="4%">{{item.pmFixedRatio}}%</td>
                            <td width="4%">{{item.pmUptate}}%</td>

                            <td width="4%">{{item.svPeopleSum}}</td>
                            <td width="4%">{{item.svAreApplying}}</td>
                            <td width="4%">{{item.svCompletionRatio}}%</td>
                            <!-- <td width="10%">111</td>
                            <td width="10%">15566778899</td>
                            <td width="10%">其他-手术室</td>
                            <td width="10%">1500</td>
                            <td width="10%">2018-08-06</td>
                            <td width="10%"></td>
                            <td width="10%">170.00㎡</td>
                            <td width="10%">商城</td>
                            <td width="10%"></td>
                            <td width="5%"><input type="button" class="uiBtn-small uiBtn-red" value="删除"></td> -->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 选中项 222 -->
        <div class="list-content">

        </div>
    </div>
</template>
<script>
import { getDivisionList } from '../Resources/Api'
export default {
    data () {
        return {
            startTime: '',
            startEndTime: '',
            endTime: '',
            timeType: 1,
            seachIco: false,
            subIndex: 3,
            divisionList: []
        }
    },
    created () {
        this.getDivisionListFn()
    },
    methods: {
        getDivisionListFn (dateFlag, pointTime) {
            getDivisionList({
                dateFlag: dateFlag == null ? 2 : dateFlag,
                pointTime: pointTime == null ? null : pointTime
            }).then(results => {
                this.divisionList = results.data.Body.divisionList
            }).catch(error => {
                console.log(error)
            })
        },


        // 切换搜索
        seachIcoSwitch () {
            this.seachIco = !this.seachIco
        }
    }
}
</script>
<style scoped>
td.cYellow {
  background-color: yellow;
}
td.cBRed {
  background-color: red;
  color: black;
}
td.cBGreen {
  background-color: green;
  color: black;
}
</style>
